<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <style>
        /* 订单页面样式 */
        .orders-container {
            width: 1000px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .orders-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        /* 订单项样式 */
        .order-item {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .order-header {
            background-color: #f9f9f9;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .order-id {
            font-weight: bold;
            color: #333;
        }
        
        .order-date {
            color: #666;
        }
        
        .order-status {
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-pending {
            background-color: #ffc107;
            color: #000;
        }
        
        .status-paid {
            background-color: #28a745;
            color: #fff;
        }
        
        .status-shipped {
            background-color: #17a2b8;
            color: #fff;
        }
        
        .status-completed {
            background-color: #6c757d;
            color: #fff;
        }
        
        .status-cancelled {
            background-color: #dc3545;
            color: #fff;
        }
        
        .order-content {
            padding: 15px;
        }
        
        .order-products {
            width: 100%;
            border-collapse: collapse;
        }
        
        .order-products th {
            background-color: #f2f2f2;
            padding: 10px;
            text-align: left;
            font-weight: bold;
            color: #333;
        }
        
        .order-products td {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 3px;
        }
        
        .product-name {
            color: #333;
            text-decoration: none;
        }
        
        .product-name:hover {
            color: #007bff;
        }
        
        .product-price {
            color: #e4393c;
            font-weight: bold;
        }
        
        .order-footer {
            padding: 10px 15px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-top: 1px solid #eee;
        }
        
        .order-total {
            font-size: 16px;
            font-weight: bold;
            color: #e4393c;
        }
        
        .order-actions {
            margin-left: 20px;
        }
        
        .btn {
            display: inline-block;
            padding: 5px 10px;
            margin-left: 10px;
            border-radius: 3px;
            text-decoration: none;
            font-size: 12px;
        }
        
        .btn-primary {
            background-color: #007bff;
            color: #fff;
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: #fff;
        }
        
        .btn-secondary {
            background-color: #6c757d;
            color: #fff;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            font-family: Arial, sans-serif;
        }

        .pagination {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .pagination-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .pagination-item:hover {
            background-color: #f0f0f0;
            color: #000;
        }

        .pagination-item.active {
            background-color: #007bff;
            color: #fff;
        }

        .pagination-item.disabled {
            color: #ccc;
            cursor: not-allowed;
            pointer-events: none;
            background-color: #f5f5f5;
        }

        .pagination-item.disabled:hover {
            background-color: #f5f5f5;
            color: #ccc;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url('images/logo.png');" href="/">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="/ucenter">我的账户</a></li>
            <li><a href="ucenter/order">我的订单</a></li>
            <li class='last'><a href="">使用帮助</a></li>
        </ul>
        <p class="loginfo">
            <c:if test="${not empty sessionScope.loginUser}">
                <c:if test="${loginUser.account =='admin'}">
                    <a href="/admin">后台管理</a>
                </c:if>
                <c:if test="${loginUser.account !='admin'}">
                    <img src="${loginUser.avatar}" width="20" height="20" />
                </c:if>
                ${loginUser.account}您好，欢迎您！[<a href="/user/logout" class="reg">安全退出</a>]
            </c:if>
            <c:if test="${empty sessionScope.loginUser}">
                [<a href="/login">登录</a>
                <a class="reg" href="/register">免费注册</a>]
            </c:if>
        </p>
    </div>
    
    <!-- 导航栏 -->
    <div class="position mt_10">
        <span>您当前的位置：</span> <a href="/"> 首页</a> » <span style="font-weight: bold">我的订单</span>
    </div>
    
    <!-- 订单列表 -->
    <div class="orders-container">
        <c:if test="${not empty orderGroups}">
            <!-- 订单项 -->
            <c:forEach items="${orderGroups}" var="order">
                <div class="order-item">
                    <div class="order-header">
                        <div class="order-id">订单号：${order.orderNo}</div>
                        <div class="order-date">下单时间：${order.addTime}</div>
                        <div class="order-status status-completed">${order.status}</div>
                    </div>
                    <div class="order-content">
                        <table class="order-products">
                            <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${order.items}" var="item">
                                <tr>
                                    <td><img src="${item.image}" class="product-image" alt="商品图片"></td>
                                    <td><a href="/goods/${item.goodsId}" class="product-name">${item.name}</a></td>
                                    <td class="product-price">¥${item.price}</td>
                                    <td>1</td>
                                    <td class="product-price">¥${item.price}</td>
                                </tr>
                            </c:forEach>


                            </tbody>
                        </table>
                    </div>
                    <div class="order-footer">
                        <div class="order-total">总计：¥10998.00</div>
                        <div class="order-actions">
                            <a href="/order/detail/20230401001" class="btn btn-primary">查看详情</a>
                            <a href="/order/comment/20230401001" class="btn btn-secondary">评价</a>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </c:if>
        <c:if test="${empty orderGroups}">
            <c:if test="${not empty sessionScope.loginUser}">
                <div style="color: #666;font-size: 16px;">--- 目前没有相关订单 ---</div>
            </c:if>
            <c:if test="${empty sessionScope.loginUser}">
                <div style="color: #666;font-size: 16px;">--- 请先登录 ---</div>
            </c:if>
        </c:if>

        <!-- 分页 -->
<%--        <div class="pagination-container" <c:if test="${empty orderGroups}">style="display: none;"</c:if>>--%>
<%--            <div class="pagination">--%>
<%--                <a href="/ucenter/order?page=1" class="pagination-item active">1</a>--%>
<%--                <a href="/ucenter/order?page=2" class="pagination-item">2</a>--%>
<%--                <a href="/ucenter/order?page=3" class="pagination-item">3</a>--%>
<%--                <a href="/ucenter/order?page=4" class="pagination-item">4</a>--%>
<%--                <a href="/ucenter/order?page=5" class="pagination-item">5</a>--%>
<%--            </div>--%>
<%--        </div>--%>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
                href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
        Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
    </div>
</body>
</html>
